<template>
  <div>
    <div>
      <el-button type="primary" @click="handleShowDialog">新增课程</el-button>
    </div>
    <!-- 加载课程计划列表分页数据展示 -->
    <el-table :data="scheduleList" border style="width: 100%">
      <el-table-column prop="sid" label="编号" width="180" />
      <el-table-column prop="title" label="内容" />
      <el-table-column prop="completed" label="进度">
        <template #default="scope">
          <el-tag :type="scope.row.completed == 1 ? 'success' : 'danger'">
            {{ scope.row.completed == 1 ? "已完成" : "未完成" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button>编辑</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页导航 -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 4, 5]"
      layout=" jumper,total, sizes, prev, pager, next"
      :total="total"
      @size-change="selectPage"
      @current-change="selectPage"
    />
    <!-- 新增课程计划对话框 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="新增课程计划" width="500">
        <el-form>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input
              v-model="schedule.title"
              autocomplete="off"
              placeholder="请输入学习计划标题"
            />
          </el-form-item>
          <el-form-item label="进度" :label-width="formLabelWidth">
            <el-select v-model="schedule.completed" placeholder="请选择进程">
              <el-option label="已完成" :value="1" />
              <el-option label="未完成" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSave"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getSchedulePage, saveSchedule } from "../api/schedule";
import { ElMessage } from "element-plus";
let pageNum = ref<Number>(1);
let pageSize = ref<Number>(3);
let uid = ref<Number>(1);
let scheduleList = ref([]);
let total = ref(0);
//加载分页数据的函数
async function selectPage() {
  let { data } = await getSchedulePage(
    pageNum.value,
    pageSize.value,
    uid.value
  );

  console.log(data);
  scheduleList.value = data.records;
  total.value = data.total;
}
//页面初始化时调用查询分页数据的请求
onMounted(() => {
  selectPage();
});
// 新增按钮事件函数：弹出对话框 清空缓存
function handleShowDialog() {
  schedule.value = {
    title: "",
    completed: 0,
    uid: 1,
  };
  dialogFormVisible.value = true;
}
//新增对话框：
let dialogFormVisible = ref(false);
const formLabelWidth = "140px";
let schedule = ref({
  title: "",
  completed: 0,
  uid: 1,
});
//新增课程计划 提交按钮事件函数
async function handleSave() {
  //1、提交新增请求给后端接口
  await saveSchedule(schedule.value);
  //如果处理成功
  //2、关闭对话框
  dialogFormVisible.value = false;
  //3、给前端提示处理结果
  ElMessage.success("新增成功");
  //4、刷新页面数据
  selectPage();
}
</script>

<style scoped>
</style>